<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="65%"
             :close-on-click-modal="false" :close-on-press-escape="false"
             destroy-on-close>
    <div v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="12">
          <p>发货单编号：<span>{{detailData.dispatchBillNumber}}</span></p>
          <p>配送单编号：<span>{{detailData.allocationNumber}}</span></p>
          <p>配送地址：<span>{{detailData.dispatchingAddress}}</span></p>
          <p>下单人员：<span>{{detailData.dispatchBillUser.nickName}}</span></p>
        </el-col>
        <el-col :span="12">
          <p> </p>
          <p>订单编号：<span>{{detailData.orderNumber}}</span></p>
          <p>销控区域：<span>{{selectDictLabel(xkqyOptions, detailData.pinControl)}}</span></p>
          <p>下单时间：<span>{{detailData.placeOrderTime}}</span></p>
        </el-col>
      </el-row>
      <el-table :data="detailData.dispatchBillDetailList">
        <el-table-column label="销控区编码" align="center" prop="pinControl" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ setPinControl(xkqyOptions, scope.row.pinControl) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品分类" align="center" prop="commodityClassify" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ selectDictLabel(spflOptions, scope.row.commodityClassify) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="供应商名称" align="center" prop="supplierName" :show-overflow-tooltip="true" />
        <el-table-column label="商品编码" align="center" prop="commodityCoding" :show-overflow-tooltip="true" />
        <el-table-column label="商品名称" align="center" prop="commodityName" :show-overflow-tooltip="true" />
        <el-table-column label="品牌商标" align="center" prop="commodityLogo" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <img class="tablePic" :src="GLOBAL.MAIN_SERVER +  scope.row.commodityLogo" alt="">
          </template>
        </el-table-column>
        <el-table-column label="计量单位" align="center" prop="measureUnit" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ selectDictLabel(jldwOptions, scope.row.measureUnit) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格" align="center" prop="specification" :show-overflow-tooltip="true" />
        <el-table-column label="单价" align="center" prop="unitPrice" :show-overflow-tooltip="true" />
        <el-table-column label="数量" align="center" prop="quantity" :show-overflow-tooltip="true" />
        <el-table-column label="金额" align="center" prop="money" :show-overflow-tooltip="true" />
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary"><el-link :href="GLOBAL.MAIN_SERVER + '/order-center/fo/dispatchBill/public/exportOne/?id=' + detailData.id" target="_blank">打印</el-link></el-button>
      <el-button @click="closeDialog">关闭</el-button>
     </span>
  </el-dialog>
</template>

<script>
  import {checkOne} from '@/api/order-management/shipmentOrder';
  import GLOBAL from '@/config/config';

  export default {
    name: 'detail',
    data() {
      return {
        dialogVisible: false,
        title: '查看发货单详情',
        detailData: {
          dispatchBillUser: {}
        },
        GLOBAL: GLOBAL,
        loading: false,
        xkqyOptions: [],
        spflOptions: [],
        jldwOptions: [],
      }
    },
    methods: {
      openCheck(data) {
        this.dialogVisible = true;
        this.getList(data);
        this.getDicts('fo_control_area').then(response => {
          this.xkqyOptions = response.data
        });
        this.getDicts("fo_commodity_type").then(response => {
          this.spflOptions = response.data;
        });
        this.getDicts("fo_measure_unit").then(response => {
          this.jldwOptions = response.data;
        });
      },
      closeDialog() {
        this.dialogVisible = false;
        this.detailData = {
          dispatchBillUser: {}
        };
      },
      getList(data) {
        this.loading = true;
        checkOne({
          id: data.id
        }).then(response => {
          if (response) {
            this.detailData = response.data;
            this.loading = false;
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-form-item {
    width: 100%;

    .el-select {
      width: 100%;
    }

    /deep/ .el-form-item__content {
      width: calc(100% - 100px);
    }
  }
  .tablePic{
    max-height: 50px;
  }

</style>
